<template>
  <view>
    <swiper :indicator-dots="isShowDot && showDot" class="swiper" :style="{height:(185*col)+'rpx'}">
      <swiper-item v-for="(item, index) in listdivInfo" :key="index" class="swiper-item">
        <view @tap.stop="goDetail(child.path, index, code)" v-for="(child, code) in item" class="smallItem" :key="code" :style="{ width: width + '%' }">
          <view class="image">
            <!-- <u-image :src="imageURL(child.image)" width="64rpx" height="64rpx" radius="32rpx">
            </u-image> -->
			<image class="image" :src="child.image"></image>
          </view>
          <view class="name">{{ child.gc_name }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import {
	mapState
} from "vuex"
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    //一行排列数
    nums: {
      type: Number,
      default: 5,
    },

    //排列行数
    col: {
      type: Number,
      default: 1,
    },
    //是否展示指示灯
    isShowDot: {
      type: Boolean,
      default: true,
    },
  },

  watch: {
    list: {
      handler: function (newVal, oldVal) {
        this.listdiv()
      },
      deep: true,
    },
  },

  mounted() {
    this.listdiv()
  },
  data() {
    return {
      listdivInfo: [],
      width: 25,
      showDot: true,
    }
  },
  computed: mapState({
  	userInfo: state => state.user.userInfo,
  }),
  methods: {
    async listdiv() {
      this.width = 100 / this.nums
      var arr = []
      let that = this
      console.log(that.nums * that.col)
      await this.list.forEach((v, index) => {
        var num = Math.floor(index / (that.nums * that.col))
        if (!arr[num]) {
          arr[num] = []
          arr[num].push(v)
        } else {
          arr[num].push(v)
        }
      })
      this.listdivInfo = arr
      if (this.listdivInfo.length > 1) {
        this.showDot = true
      } else {
        this.showDot = false
      }
    },
	// 详情
	goDetail(path, index, code) {
		// let {
		// 	id
		// } = this.list.data[index]
		// debugger
		// let url = '/user/pages/pay'
		let url = `/service/pages/user-list-other?id=${index}`
		this.$util.goUrl({
			url
		})
		// let number = index * 10 + code
		// if(this.userInfo.svip > 0 || this.userInfo.svip2 > 0){
			// url = path + `&index=${number}`
		// }
		// this.$util.goUrl({
		// 	url
		// })
	},
  },
}
</script>

<style lang="scss" scoped>
.swiper {
  padding: 12rpx 32rpx;
  border-radius: 0rpx;
}

.swiper-item {
  display: flex;
  flex-wrap: wrap;
  .smallItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16rpx 0;
    overflow: hidden;

    image {
      width: 86rpx;
      height: 86rpx;
    }

    .name {
      margin-top: 8rpx;
      font-size: 24rpx;
    }
  }
}
</style>
